><template>
    <div class="dh_xgj_detclient">

        <div class="d_x_d-icon" @click="back" title="返回上一步操作"></div>

        <div class="d_x_d-list">

            <table class="d_x_d-l-table">
                <tr>
                    <th>客户id</th>
                    <th>客户姓名</th>
                    <th>客户手机</th>
                    <th>微信</th>
                    <th>毕业院校</th>
                    <th>地址</th>
                    <th>渠道</th>
                    <th>客户详细信息</th>
                </tr>
                <tr v-for="(item,key) in client" :key="key">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.phone}}</td>
                    <td>{{item.wx}}</td>
                    <td>{{item.school}}</td>
                    <td>{{item.address}}</td>
                    <td>{{item.channel}}</td>
                    <td class="d_x_d-l-t-btn"><router-link :to="'/clidet/' + item.id">查看</router-link></td>
                </tr>
            </table>

            <div class="d_j_d-l-block mt20">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    layout="prev, pager, next, jumper"
                    :page-count="pagecount"
                    >
                </el-pagination>
            </div>

        </div>

    </div>
</template>

<script>

export default {
    components: {},
    data() {
        return {
            routerid: '',
            client:[],
            login: {},                          //缓存中的用户名跟密码
            currentPage: 1,						//分页的默认页数
            pagecount: 0,						//总页数
        };
    },
    computed: {},
    watch: {},
    methods: {
        // 返回键
        back(){
            let that = this
            this.$router.go(-1);//返回上一层
        },
        // 请求函数
        requestdata(){
            const that = this;
            let axios = require('axios');
            let data = {
                name:that.login.uname,
                password:that.login.pwd,
                user_id: that.routerid,
                page: that.currentPage
            }
            let updata = JSON.stringify(data)
            // console.log(data,updata)
            axios({
                method: 'post',
                url: '/api/api/dh_school/b_custlist.php',
                headers: { "Content-Type": "appliction/JSON" },
                data: updata
            })
            .then( resp=> {
                // console.log(resp)
                if(that.pagecount === 0){
                    that.pagecount = resp.data.code
                }
                that.client = resp.data.data
            })
            .catch( err=> { 
                // console.log(err)
            })
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.requestdata()
        },
    },
    created() {},
    mounted() {
        const that = this;
        that.routerid = this.$route.params.id
        that.login = JSON.parse(sessionStorage.getItem("dh_xgj_login"))
        that.requestdata()
    },
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    }
</script>
<style scoped>
/* //@import url(); 引入公共css类 */

    .dh_xgj_detclient{
        /* display: flex;
        flex-direction: column;
        justify-content: space-between; */
        height: 100%;
    }
    /* 返回键 */
    .d_x_d-icon{
        width: 20px;
		height: 20px;
		margin: 10px 0 30px 0;
		background: url(../assets/return.png);
    }

    .d_x_d-list{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: calc(100% - 60px);
    }
    .d_x_d-l-table{
        width: 100%;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 1px 1px 5px rgb(77, 77, 77);
        border-collapse: collapse;
    }
    .d_x_d-l-table>tr{
        height: 50px;
    }
    .d_x_d-l-table>tr:nth-child(even){
        color: white;
        background-color: rgb(168, 168, 168);
    }
    .d_x_d-l-t-btn>button.el-button{
        padding: 8px 12px;
        border: none;
        color: white;
        font-size: 14px;
        background-color: #00aeff;
    }

</style>